<!--
 * @Author: your name
 * @Date: 2021-09-01 16:03:37
 * @LastEditTime: 2021-09-05 11:34:23
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \bigdate\src\views\admin\componentsPage\chartsPage.vue
-->
<template>
    <div class="echartContent">
        <!-- 只需要设置 md 中等屏幕 xs 小屏幕（移动端） lg 大屏（PC端） -->
        <div :class="['echartdome', enterLoad ? 'enter-y' : '']">
            <Row type="flex" justify="center" :gutter="[11, 11]">
                <Col :md="{ span: 24 }" :xs="{ span: 24 }" :lg="{ span: 8 }">
                    <V-echart tag="年" :loading="loading" :datas="dataobj1"></V-echart>
                </Col>
                <Col :md="{ span: 24 }" :xs="{ span: 24 }" :lg="{ span: 8 }">
                    <V-echart tag="月" :loading="loading" :datas="dataobj2"></V-echart>
                </Col>
                <Col :md="{ span: 24 }" :xs="{ span: 24 }" :lg="{ span: 8 }">
                    <V-echart tag="类型" :loading="loading" :datas="dataobj3"></V-echart>
                </Col>
            </Row>
        </div>
        <div :class="['echartdome', enterLoad ? 'enter-y' : '']">
            <Row type="flex" justify="center" :gutter="[11, 11]">
                <Col :md="{ span: 24 }" :xs="{ span: 24 }" :lg="{ span: 24 }">
                    <V-echart
                        :loading="loading"
                        :datas="dataobj4"
                        :class="getHeaderClass"
                    ></V-echart>
                </Col>
            </Row>
        </div>
    </div>
</template>
<script lang="ts">
import { defineComponent, computed, unref, ref } from 'vue'
import VEchart from '../../../components/echarts/EchartsTEmp.vue'
import { Card } from 'ant-design-vue'
import { SetTheme } from '../../../setting/theme'
import {
    SeleData,
    VisitAnalysisBar,
    VisitAnalysis,
    VisitSource,
} from '../../../mock/echartdatas'
import { Row,Col } from 'ant-design-vue'
export default defineComponent({
    components: { Card, VEchart,Row,Col },
    setup(props) {
        let { themeColors } = SetTheme()
        // 响应式主题配置
        const getHeaderClass = computed(() => {
            const theme = unref(themeColors)
            return [`primary-${theme}-color`]
        })
        //  进入loading
        let enterLoad = ref()
        enterLoad.value = false
        //  图表数据导入
        let dataobj1 = ref()
        dataobj1.value = SeleData
        let dataobj2 = ref()
        dataobj2.value = VisitAnalysisBar
        let dataobj3 = ref()
        dataobj3.value = VisitSource
        let dataobj4 = ref()
        dataobj4.value = VisitAnalysis
        let loading = ref()

        loading.value = true
        setTimeout(() => {
            enterLoad.value = true
        }, 500)
        // 首次加载数据等待
        setTimeout(() => {
            loadfun()
        }, 1500)
        // 更新图表数据直接赋值即可
        // dataobj4.value = {......};

        // 初始化loading
        const loadfun = () => {
            loading.value = false
        }

        return {
            getHeaderClass,
            dataobj1,
            dataobj2,
            dataobj3,
            dataobj4,
            loading,
            loadfun,
            enterLoad,
        }
    },
})
</script>
<style lang="less" scoped>
@import "../../../styles/commit.less";
.title {
  font-size: 13px;
  font-weight: 100;
}

.echartContent {
  min-height: 80vh;
}
.echartdome {
  transform: translateY(100px);
  opacity: 0;
  transition: all 0.4s ease-in 0s;
  &:nth-of-type(2) {
    margin-top: 10px;
    transition: all 0.4s ease-in 0.2s;
  }
  &.enter-y {
    transform: translateY(0);
    opacity: 1;
  }
}
</style>
